/* 基础样式 */
:root {
  /* 颜色变量 */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-disabled: rgba(255, 255, 255, 0.45);
  --text-hint: rgba(255, 255, 255, 0.4);
  
  /* 字体大小 */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  
  /* 统一使用系统字体 */
  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont, 
                       'Segoe UI', 'SF Pro Text', 'Helvetica Neue', 
                       Arial, sans-serif;
  
  /* 中文系统字体 */
  --font-family-chinese: 'PingFang SC', 'Hiragino Sans GB', 
                        'Microsoft YaHei', 'WenQuanYi Micro Hei', 
                        sans-serif;
  
  /* 合并后的字体族 */
  --font-family: var(--font-family-system), var(--font-family-chinese);
  
  /* 等宽字体，用于代码和输出 */
  --font-family-mono: 'SF Mono', Menlo, Monaco, Consolas, 
                     'Liberation Mono', 'Courier New', monospace;
}

body {
  margin: 0;
  background-color: rgba(0, 0, 0, 0) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#app {
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0) !important;
}

/* 标题样式 */
.category-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

/* 工具卡片样式 */
.tool-name {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

.tool-info {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}

/* Element Plus 组件样式覆盖 */
.el-button,
.el-input__inner,
.el-select-dropdown__item,
.el-dialog__title,
.el-form-item__label,
.el-message,
.el-message-box {
  font-family: var(--font-family) !important;
}

.el-button {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(64, 158, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  z-index: 1;
}

.el-button:hover {
  background: rgba(64, 158, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 20px rgba(64, 158, 255, 0.3);
}

.el-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: translateX(-100%);
  transition: 0.5s;
}

.el-button:hover::before {
  transform: translateX(100%);
}

.el-input__inner {
  font-size: var(--font-size-md) !important;
  color: var(--text-primary) !important;
}

.el-dialog__title {
  font-size: var(--font-size-lg) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.el-form-item__label {
  font-size: var(--font-size-md) !important;
  color: var(--text-secondary) !important;
}

.el-select-dropdown__item {
  font-size: var(--font-size-sm) !important;
}

/* 搜索框样式 */
.search-bar {
  .el-input__inner,
  .el-button {
    font-family: var(--font-family) !important;
  }
}

/* 工具数量标签 */
.tool-count {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* 右键菜单样式 */
.context-menu {
  font-size: var(--font-size-sm);
}

.menu-item {
  color: var(--text-primary);
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 0 !important;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.content-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: auto;
}

.content-wrapper::-webkit-scrollbar {
  display: none;
}

/* 对话框内容样式 */
.el-dialog {
  .el-form-item {
    margin-bottom: 18px;
  }
  
  .el-input__inner,
  .el-select__input {
    font-size: var(--font-size-md) !important;
  }
  
  .el-button {
    font-size: var(--font-size-sm) !important;
    font-weight: 500;
  }
}

/* 工具卡片悬浮效果 */
.tool-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.tool-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* 输出区域样式 */
.output-content {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-primary);
}

.semi-transparent {
  background-color: rgba(255, 255, 255, 0.1);
}

.glass-effect {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}

/* 添加工具对话框样式 */
.add-tool-dialog {
  .el-dialog__title,
  .el-form-item__label,
  .el-input__inner,
  .el-select__input,
  .el-button {
    font-family: var(--font-family) !important;
  }
}

/* 确保内容区域在水印之上但不影响其他元素 */
.container {
  position: relative;
  isolation: isolate;
} 